<template>
	<view class="app l_pages">
		<jnavbar :title="'评论'"></jnavbar>
		<scroll-view scroll-y="true" class="page_container body" @scrolltolower='evaluatelist'>
			<view class="all-comment">
				<view class="com_item van-hairline--bottom" v-for="(item, i) in evaluate_list" :key='i'>
					<view class="head">
						<view class="userinfo" v-if="item.user">
							<view class="avart"><image :src="item.user.picurl" mode=""></image></view>
							<text class="name">{{ item.user.nickname }}</text>
							<text class="time"></text>
						</view>
						<view class="star"><uni-rate readonly='true' :size="14" :margin="6" v-model="item.score" :allowHalf="true" /></view>
					</view>
					<view class="content">{{ item.content }}</view>
					<text class="spec" v-if="item.pvs_value">规格:{{ item.pvs_value }}</text>
					<view class="comment-imgs">
						<view @click="showimg(item)" class="img-box" v-for="(data, id) in item.img_url" :key='id'><vimage :src="data" mode="" class="img"></vimage></view>
					</view>
					<view class="uni-flex-row reply sm-font" v-if="item.reply">
						<text class="title">回复：</text>
						<text>{{item.reply}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
<!-- 		<view >
		
		</view> -->
	</view>
</template>

<script>
import http from '@/common/http.js';

export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			evaluate_list: [],
			page: 1
		};
	},
	async onLoad(e) {
		await this.$getWx
		this.id = e.id;
		this.evaluatelist();
	},
	onReachBottom() {
		this.evaluatelist();
	},
	onPullDownRefresh() {
		this.page=1;
		this.evaluate_list=[];
		this.evaluatelist()
	},
	methods: {
		showimg(item){
			uni.previewImage({
				urls:item.img_url
			})
		},
		//评价
		evaluatelist() {
			let params = {
				id: this.id,
				size: 10,
				page: this.page
			};
			uni.showLoading();
			http('/goods/evaluate', params, 'GET').then(res => {
				uni.hideLoading();
				uni.stopPullDownRefresh()
				if (res.statusCode == 200) {
					let evaluate_list = res.data.msg.data;
					if (evaluate_list.length > 0) {
						evaluate_list.forEach(a => {
							a.img_url = JSON.parse(a.img_url);
							a.score=a.score/2
						});
						this.page++;
						this.evaluate_list = this.evaluate_list.concat(evaluate_list);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	
	.app{
		height: 100vh;
	}
.body {
	width: 100%;
	// position: relative;
	height: 100vh;
	.all-comment {
		width: 100%;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 500;
		overflow: hidden;

		.com_item {
			padding: 0 24rpx;
			position: relative;
			list-style: none;
			background: #fff;
			margin: 16rpx 0;
			padding-bottom: 16rpx;
		}
		.head {
			display: flex;
			font-size: 28rpx;
			line-height: 40rpx;
			justify-content: space-between;
			padding: 16rpx 0;
			.userinfo {
				display: flex;
				flex-wrap: nowrap;
			}
			.avart {
				width: 40rpx;
				height: 40rpx;
				-ms-flex-negative: 0;
				flex-shrink: 0;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.name {
				flex: 1;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-left: 20rpx;
			}
			.time {
				-ms-flex-negative: 0;
				flex-shrink: 0;
				font-size: 24rpx;
				display: inline-block;
				margin: 0 16rpx;
			}
		}
		.star {
			margin-bottom: 5rpx;
			font-size: 30rpx;
		}
		.content {
			font-size: 28rpx;
			line-height: 40rpx;
			padding-bottom: 16rpx;
			overflow: hidden;
			word-break: break-all;
		}
		.spec {
			font-size: 24rpx;
			line-height: 34rpx;
			color: #969696;
			padding-bottom: 16rpx;
			display: block;
		}
		.comment-imgs {
			padding-bottom: 16rpx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			.img-box {
				overflow: hidden;
				border-radius: 12rpx;
				width: 220rpx;
				height: 220rpx;
				box-sizing: border-box;
				margin-bottom: 16rpx;
				margin-right: 20rpx;
				&:nth-child(3n) {
					margin-right: 0;
				}
				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.reply{
			padding: 20rpx;
			background: #F5F5F5;
			
			.title{
				width: 80rpx;
				align-self: flex-start;
			}
			text:last-child{
				width:582rpx;
			}
			
		}
	}
}
</style>
